<template>
  <div>
    <p>vue3--Demo(使用setup语法糖)--组件props</p>
    <a-divider>组件--父子组件，包含双向的数据传递和事件调用</a-divider>
    <p>组件的基础使用：定义、引入、注册、使用</p>
    <p>父组件向子组件传递数据，固定值可直接在组件属性中写入，动态值使用v-bind(简写为:)</p>
    <a-divider>组件--父子组件，以下部分为父组件部分</a-divider>
    <p>父组件--数据信息：dataFlag:{{ dataFlag }} fixModelData:{{ fixModelData }}</p>
    <p
      >父组件中通过props事件接收到子组件的数据信息：paramFromChild1：{{
        paramFromChild1
      }}
      paramFromChild2:{{ paramFromChild2 }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="generateData"
        >先点击此按钮自动生成传递至子组件的数据</a-button
      >
      <a-button type="primary" @click="onParentCallChildMethod">调用子组件事件</a-button>
    </a-space>
    <a-divider>组件--父子组件，以下部分为子组件部分</a-divider>
    <!-- 同一个子组件在页面中有多个，可能会造成事件传递问题，可以在父组件中对每个子组件的事件定义不同的接收处理事件 -->
    <!-- <Demo22Child1 id="ID设置必须有，不传会有警告" /> -->
    <!-- <DemoChildComponent />
    <Cmp1 /> -->
    <Demo22Child1
      id="D10021"
      :flag="dataFlag"
      :data="fixModelData"
      :getChildInput1="onGetChildData1"
      :getChildInput2="onGetChildData2"
      @parentComponentMethod="onChildCallParentMethod"
      ref="childComponentRef"
    />
  </div>
</template>
<script setup lang="ts">
  console.log('Demo(使用setup函数)--组件props--父组件/页面 setup 语法糖 执行了。');

  import { ref, reactive } from 'vue';
  import { DataModel, TimeAndFlagDataModel } from './data';
  import { message } from 'ant-design-vue';

  //引入--引入后名称可作为别名使用，与子组件的文件名、name定义无关；以下均可使用
  import Demo22Child1 from './Demo22Child1.vue';
  // import DemoChildComponent from './Demo22Child1.vue';
  // import Cmp1 from './Demo22Child1.vue';

  //定义传递给子组件的数据
  const dataFlag = ref<boolean>(true);
  const fixModelData: DataModel = reactive({
    id: '初始化ID值',
    name: '初始化name值',
    flag: true,
  });
  function generateData() {
    dataFlag.value = !dataFlag.value;
    fixModelData.id = '改变后的ID值';
    fixModelData.name = '改变后的name值';
    fixModelData.flag = !fixModelData.flag;
  }

  //接收子组件通过props事件传递的参数值
  const paramFromChild1 = ref(null);
  function onGetChildData1(data) {
    console.log('parent func ', data);
    paramFromChild1.value = data;
  }
  const paramFromChild2: TimeAndFlagDataModel = reactive({});
  function onGetChildData2(data) {
    //对象类型不能直接赋值，对象为静态，直接赋值会报错
    // paramFromChild2 = data;
    paramFromChild2.time = data.time;
    paramFromChild2.flag = data.flag;
  }

  //处理子组件调用父组件事件
  function onChildCallParentMethod(data) {
    message.info('父组件中提示信息：子组件调用父组件方法，参数为：' + data, 5);
  }

  //父组件调用子组件事件定义
  //定义子组件调用，创建ref对象，并在子组件标签上加上ref，在return中导出
  const childComponentRef = ref(null);
  //定义父组件中调用子组件事件，在return中导出
  //暂时无法传参，可以通过props传数据实现
  function onParentCallChildMethod() {
    (childComponentRef as any).value.showMessageMethod(new Date());
  }
</script>
<style scoped></style>
